import VueRouter from "vue-router";
// VueRouter 路由器
import home from '../router/home.vue'
const routes = new VueRouter({
    // 区别 history路径不带#，比较美观
    // history模式，刷新后会把路径当成接口资源，但是hash模式不会
    mode: 'history',
    // routes 路由
    routes: [
        {
            // path为/代表一进页面就展示的页面
            path: '/',
            // 重定向(展示重定向里面的内容),他只是一进入页面的时候有效果，不要重定向到本身
            redirect: '/app1'
        },
        {
            path: '/home',// 路由跳转的路径，自己命名		
            component: home,//跳转到组件(2种方法)
            // redirect: { name: 'shop' },
            name: 'home',// 命名路由
            //路由元信息(写定义变量)
            meta: {
                title: 'home',
                isAutr: true
            },
            // 路由独享守卫
            // beforeEnter:(to,from,next)=>{
            //     // to,beforeEnter写在那个路由下就指代谁
            //     console.log(to,from);
            //     if(to.meta.isAutr){
            //         next()
            //     }else{
            //         next(false)
            //     }
            // },
            // children: [{
            //     path: '/shop',
            //     component: () =>
            //         import('../router/shop.vue'),
            //     name: 'shop',
            //     meta: {
            //         title: 'shop',
            //         isAutr: false
            //     },
            //     children: [{
            //         path: '/app',// => 设置路径	
            //         component: () =>
            //             import('../router/app.vue'),
            //         name: 'app',
            //         meta: {
            //             title: 'app',
            //             isAutr: true
            //         }
            //     }]
            // }, {
            //     path: '/user',
            //     component: () =>
            //         import('../router/user.vue'),
            //     name: 'user',
            //     meta: {
            //         title: 'user',
            //         isAutr: true
            //     }
            // }]
        },
        {
            // 登录页面
            path: '/about',// => 设置路径	
            // component: () =>
            //     import('../router/about.vue'),
            components: {
                default: () =>
                    import('./about.vue'),
                a: () =>
                    import('./shop.vue')
            },
            name: 'about',
            meta: {
                title: 'about',
                isAutr: true
            }

        },
        {
            path: '/app1',// => 设置路径	
            redirect: { name: 'add' },
            component: () =>
                import('../router/app1.vue'),
            name: 'app1',
            meta: {
                title: 'app1',
                isAutr: true
            },
            children: [
                {
                    path: '/add',
                    component: () =>
                        import('../router/add.vue'),
                    name: 'add',
                    meta: {
                        title: 'add',
                        isAutr: true
                    }

                },
                {
                    path: '/shop',
                    component: () =>
                        import('../router/shop.vue'),
                    name: 'shop',
                    meta: {
                        title: 'shop',
                        isAutr: true
                    },
                    children: [{
                        path: '/app',// => 设置路径	
                        component: () =>
                            import('../router/app.vue'),
                        name: 'app',
                        meta: {
                            title: 'app',
                            isAutr: true
                        }
                    }]
                }, {
                    path: '/user',
                    component: () =>
                        import('../router/user.vue'),
                    name: 'user',
                    meta: {
                        title: 'user',
                        isAutr: true
                    }
                },
                {
                    path: '/page1',
                    component: () =>
                        import('../router/page1.vue'),
                    name: 'page1',
                    meta: {
                        title: 'page1',
                        isAutr: true
                    }
                },
                {
                    path: '/page2',
                    component: () =>
                        import('../router/page2.vue'),
                    name: 'page2',
                    meta: {
                        title: 'page2',
                        isAutr: true
                    }
                }
            ]
        }
    ]
});
// 导航守卫
// 第一个 前置守卫
routes.beforeEach((to, from, next) => {
    // console.log('to', to);
    // console.log('from', from);
    // console.log(to.meta.isAutr);

    // 放行，走自己的逻辑
    // next()
    // 不放行
    // next(false)
    // 放行指定的路由
    // next({name:'',path:''})


    // if (to.meta.isAutr) {
    //     next()
    // } else {
    //     next(false)
    // }

    let newname = localStorage.getItem("用户名")
    let newmima = localStorage.getItem('密码')
    if (to.path == '/about') {
        if (newname && newmima) {
            next({ name: 'add' })
        } else {
            next()
        }
    } else {
        if (newname && newmima) {
            console.log(to);
            next()
        } else {
            next({ name: 'about' })
        }
    }
})
// 后置守卫
// routes.afterEach((to, from) => {
//     document.write = to.meta.title
// })
export default routes